<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/*结合实际html结构--通配【合理】*/
		*{
			font: 16px "微软雅黑";
			/*去掉内外边距*/
			margin: 0;
			padding: 0;
			/*无序列表：有样式--"去一个样式：列表项"*/
			list-style-type: none;
			/*无序列表：有样式---【理解：简写】
			去全部样式： list-style-type: 去列表样式
			            list-style-position 去列表项标记位置样式
						list-style-image    去列表项图片标记样式
			*/
			list-style: none;
		}
		/*左栏效果
		   1.左栏空间区域【aside】  235*460 背景颜色
		   2.左栏区域内容【li】  加权235*50 相对定位--挂靠点【固定位置】
		   3.给每个区域内容【li】 加鼠标移动上去改背景颜色
		   4.左栏弹出框：400*450 1像素边框  绝对定位-微调
		*/
	   aside{
        width: 235px;
		height: 460px;
		background: #e0dbee;
		margin: 20px 50px;
		
	   }
	   aside ul.sidebar li{
		   width: 235px;
		   height: 50px;
		   /*相对定位--挂靠点*/
		   position: relative;
		   text-align: center;
		   line-height: 50px;
	   }
	    aside ul.sidebar li:hover{
			background: #d9c9ee;
			display: block;
		}
		aside ul.sidebar div.out{
			width: 460px;
			height: 450px;
			border: 1px solid red;
            /*挂靠位：绝对定位：按照相对定位基点开始定位*/
			position: absolute;
			left: 285px;
			/* 显示与隐藏 JavaScript 【JQuery框架】*/
			display: none;
		}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构  结构化标记【语义化标签】  
		aside元素 针对：左栏、广告、弹出效果 ...有利于SEO优化
		之前版本通过div+id起别名的方式【缺点：繁琐、定义起名、冗余】
		
		-->
		<aside>
			<ul class="sidebar">
				<!-- 弹出框 -->
				<div class="out"></div>
				<li>手机</li>
				<li>电脑</li>
				<li>家具</li>
				<li>男装</li>
				<li>女装</li>
				<li>美妆</li>
				<li>房产</li>
				<li>母婴</li>
				<li>食品</li>
			</ul>
		</aside>
		<script>
			// 左栏弹出与隐藏   .hover事件源+css函数
			// 选择器：li
			$("aside ul.sidebar li").hover(function(){
				/*弹出框默认：隐藏---hover悬停第一件事：显示*/
				$("aside ul.sidebar div.out").css("display","block");
			},function(){
				$("aside ul.sidebar div.out").css("display","none");
			});
		</script>
	</body>
</html>
<!-- 事件源 hover()   实现切换效果与css悬停hover一致
                     语法：  .hover(function(){},function(){})
 -->